<template>
    <div>
        <div id="searchbar" class="all" style="padding: 5px;width: 100%;background: #ffffff2e;">
            <a-row>
                <a-col :span="2">
                  
              </a-col>
              <a-col :span="3" style="padding:3px;">
                  <a-tag :color="card1tagColor">{{ card1desc }}</a-tag>
                
              </a-col>
               <a-col :span="3">
                  
               </a-col>
                <a-col :span="8">
                <div style="padding: px;text-align: center;line-height: 40px;font-size: 18px;color: #ffff;font-weight: 600;vertical-align: middle;">
                  乌海市煤层矸石山分布数据
                   </div>
               </a-col>
                <a-col :span="8">
                    <a-input-search  enter-button placeholder="输入煤层名称查询" size="large" style="width: 380px" @search="onQySearch" />
                </a-col>
            </a-row>
     
            </div>
        <div id="map" :style="{ height: Height + 'px' }" style="position: relative;border: 1px solid #9999ff;box-shadow: 0 0px 5px 0 rgb(6 13 245) inset;}">
             <div id="select-left-bar">
                          <a-card>
                <span slot="title">
                  <a-icon type="table"/>
                  <span style="margin-left:10px;">煤层矸石山基本信息</span>
                </span>
                <a-table
                      :dataSource="leftTableData"
                      :columns="columns"
                      rowKey="kid"
                      :pagination="pagination"
                      size="middle"
                    >
                      <template slot="actionRender" slot-scope="text, record">
                        <span>
                          <a @click="editRecord(record)">编辑</a>
                            <a-divider type="vertical" />
                          <a @click="monitorPointLocate(record)">定位</a>
                        </span>
                      </template>
                    </a-table>
              </a-card>
        </div>
        <a-drawer
      title="煤层矸石山基本信息编辑"
      placement="right"
      :visible="visible"
      :maskClosable="false"
      width="480"
      :get-container="false"
      :wrap-style="{ position: 'absolute' }"
      @close="onClose"
    >
     <a-form :form="form">
        <div style="display:none">
          <a-form-item v-bind="formItemLayout" label="id">
            <a-input v-decorator="['id']" />
          </a-form-item>
        </div>
        <a-form-item v-bind="formItemLayout" label="名称">
          <a-input v-decorator="['ckqmc']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="分层名称">
          <a-input v-decorator="['fcm']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="类型及名称">
          <a-input v-decorator="['lxjmc']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="自燃类型">
          <a-input v-decorator="['zrlx']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="自燃点数量">
          <a-input v-decorator="['zrdsl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="自埋数量">
          <a-input v-decorator="['zlsl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="验收情况">
          <a-input v-decorator="['ysqk']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="SO2年排放量">
          <a-input v-decorator="['so2pfl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="NOx年排放量">
          <a-input v-decorator="['noxpfl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="颗粒物年排放量">
          <a-input v-decorator="['klwpfl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="面积">
          <a-input v-decorator="['mj']" />
        </a-form-item>
      </a-form>
       <div
        :style="{
        
          left: 0,
          bottom: 0,
          width: '100%',
          textAlign: 'center',
        }"
      >
        <a-button :style="{marginRight: '8px'}" @click="onClose">取消</a-button>
        <a-button @click="onSave" type="primary">保存</a-button>
      </div>
    </a-drawer>
        </div>
       <PopUp :popupOption="popupData"></PopUp>
       
    </div>
</template>
<script>
import * as mapOper from '../../scripts/mapOper.js';
import config from '../../config/config';
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');

import PopUp from './PopUp';
//import ADLayer from 'openlayers_echart';
export default {
  name:'R10103',
  data() {
    function showTotalFn(total) {
      return `总数：${total} `;
    }
    return {
        
      map:null,
      Height: 500,
      visible:false,
      loaclQyData:[],
      leftTableData: [],
      mineSource:[],
      selectSource:[],
      mineLocalData:[],
      mouseEnterDelay: 0.6,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      //传递到弹窗组件中的数据
      popupData: {},
      columns: [
        {
          title: '采矿区名称',
          dataIndex: 'ckqmc',
          key: 'ckqmc',
          align: 'center'
        },
        {
          title: '自燃类型',
          dataIndex: 'zrlx',
          key: 'zrlx',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 105,
          align: 'center',
          scopedSlots: {
            customRender: 'actionRender'
          }
        }
      ],
      pagination: {
        size: 'small',
        defaultCurrent: 1,
        defaultPageSize: 8,
        pageSize: 8,
        showTotal: showTotalFn
      },
      card1color: '#FAAD14',
      card1avatar: '6个',
      card1tagColor: 'orange',
      card1desc: '数据总数',

      card2color: '#52C41A',
      card2avatar: '6个',
      card2tagColor: 'green',
      card2desc: '排放口总数',

      card3color: '#1890FF',
      card3avatar: '条',
      card3tagColor: '#f50',
      card3desc: '累计清洗数据473449条',
    };
  },
  components: {
    PopUp
  },
  mounted: function() {
    let height = window.innerHeight - 154;
    this.Height = height;
    this.$nextTick(() => {
      this.map = mapOper.initBlankMap('map');
      var container = document.getElementById('popup');
      let markerSetting = {
        map: this.map,
        element: container
      };
      this.map = mapOper.addMarker(markerSetting);
     
      this.map.getView().setZoom(4);
    });
    //this.initJcdData();
    this.initKqBasicInfo();
    
  },
  methods:{
    onQySearch:function(){
          
    },
    onClose(){
      this.visible=false;
    },
    initKqBasicInfo(){
      let that=this;
      //加载矿区wfs图层
      let params = {
        this: this,
        url:
          config.baseMapUrl +
          'wuhai-wfsmap?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=coalganguehill&OUTPUTFORMAT=json',
        successFunc: response => {
          that.mineLocalData = response.data;
          let tempsource = [];
          let tabledata = [];

          _.forEach(response.data.features, function(item) {
            tempsource.push(item.properties.ckqmc);
            tabledata.push({
              kid: item.properties.gid,
              ckqmc: item.properties.ckqmc,
              zrlx: item.properties.zrlx,
             
            });
          });
          that.mineSource = _.uniq(tempsource);
          that.selectSource = that.mineSource;
          let uniqtable = _.uniqBy(tabledata,'ckqmc');

          let sorteddata=_.sortBy(uniqtable, ['ckqmc']);
          that.leftTableData = sorteddata;


          that.card1desc='数据总数：'+tabledata.length+'条';
       
          let style = mapOper.getGeoJsonStyle('CoalGanguehill');
          let wfsParams = {
            map: that.map,
            jsonData: that.mineLocalData,
            style: style,
            styleFunc: null,
            selectFunc: function(e) {
              if (e.target.getFeatures().getLength() == 1) {
                let feature = e.target.getFeatures().item(0);

                let extents = feature.getGeometry().getExtent();
                let popset = {
                  map: that.map,
                  coordinate: [
                    (extents[2] + extents[0]) / 2,
                    (extents[3] + extents[1]) / 2
                  ]
                };

                that.popupData = {
                  display: 'block',
                  contentType: 'CoalGanguehill',
                  Title: feature.get('ckqmc'),
                  fcm: feature.get('fcm'),
                  lxjmc: feature.get('lxjmc'),
                  zrlx: feature.get('zrlx'),
                  zrdsl: feature.get('zrdsl'),
                  zlsl: feature.get('zlsl'),
                  ysqk: feature.get('ysqk'),
                  so2pfl: feature.get('so2pfl'),
                  mj: feature.get('mj'),
                  noxpfl: feature.get('noxpfl'),
                  klwpfl: feature.get('klwpfl')
                };
                mapOper.showPopUp(popset);
                let zoomparams = {
                  map: that.map,
                  center: popset.coordinate,
                  zoom: 5
                };
                mapOper.ZoomAndCenter(zoomparams);
              } else {
                that.popupData = { display: 'none' };
              }
            }
          };
          mapOper.loadWFSLayer(wfsParams);
        }
      };
      commonOper.HttpGet(params);
    },
    
    editRecord(record) {
      let resArr = _.filter(this.mineLocalData.features, function(o) {
        if (o.properties.gid == record.kid) {
          return o;
        }
      });
      let temp = {
        id: resArr[0].properties.id,
        ckqmc: resArr[0].properties.ckqmc,
        fcm: resArr[0].properties.fcm,
        lxjmc: resArr[0].properties.lxjmc,
        zrlx: resArr[0].properties.zrlx,
        zrdsl: resArr[0].properties.zrdsl,
        zlsl: resArr[0].properties.zlsl,
        ysqk: resArr[0].properties.ysqk,
        so2pfl: resArr[0].properties.so2pfl,
        mj: resArr[0].properties.mj,
        noxpfl: resArr[0].properties.noxpfl,
        klwpfl: resArr[0].properties.klwpfl
      };
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(temp);
      });
    },
    monitorPointLocate(record) {
      let resArr = _.filter(this.mineLocalData.features, function(o) {
        if (o.properties.ckqmc == record.ckqmc) {
          return o;
        }
      });
      let geojson = {
        type: 'FeatureCollection',
        name: 'coalganguehill',
        features: resArr
      };
      let styleops = mapOper.getGeoJsonStyle('highlightmine');
      mapOper.loadHightLightLayer(this.map, styleops, geojson);
      let extents = mapOper.getPolygonExtents(resArr[0].geometry.coordinates);
      let popset = {
        map: this.map,
        coordinate: [
          (extents[2] + extents[0]) / 2,
          (extents[3] + extents[1]) / 2
        ]
      };

      this.popupData = {
        display: 'block',
        contentType: 'CoalGanguehill',
        Title: resArr[0].properties.ckqmc,
        fcm: resArr[0].properties.fcm,
        lxjmc: resArr[0].properties.lxjmc,
        zrlx: resArr[0].properties.zrlx,
        zrdsl: resArr[0].properties.zrdsl,
        zlsl: resArr[0].properties.zlsl,
        ysqk: resArr[0].properties.ysqk,
        so2pfl: resArr[0].properties.so2pfl,
        mj: resArr[0].properties.mj,
        noxpfl: resArr[0].properties.noxpfl,
        klwpfl: resArr[0].properties.klwpfl
      };
      mapOper.showPopUp(popset);
      let zoomparams = {
        map: this.map,
        center: [(extents[2] + extents[0]) / 2, (extents[3] + extents[1]) / 2],
        zoom: 5
      };
      mapOper.ZoomAndCenter(zoomparams);
    },
    onSave() {
      this.form.validateFields((err, values) => {
        if (!err) {
          //console.log('edit',values);
          // let requestStr = "/sydinfo/addsydwatercheck";
          let data = {
            id: Number(values.id),
            ckqmc: values.ckqmc,
            fcm: values.fcm,
            lxjmc: values.lxjmc,
            zrlx: values.zrlx,
            zrdsl: values.zrdsl,
            zlsl: values.zlsl,
            ysqk: values.ysqk,
            so2pfl: values.so2pfl,
            mj: values.mj,
            noxpfl: values.noxpfl,
            klwpfl: values.klwpfl
          };
       
          let params = {
            this: this,
            url: config.webapiUrl + '/coalganguehill/editcoalganguehill',
            data: data,
            successFunc: result => {
              if (result.data.code == 0) {
                this.$message.success(result.data.data);
                this.visible = false;
                this.initKqBasicInfo();
              } else {
                this.$message.error('请求失败，请稍后重试！');
              }
            },
            failFunc: result => {
              //console.log('handleSubmit---failFunc---', result);
              this.$message.error('网络错误，请检查连接！'+result);
            }
          };
          commonOper.HttpPost(params);
        }
      });
    },

  }
};
</script>
<style>
.content .ant-input{
background-color: rgba(0, 0, 0, 0.07) !important;
}

.content .ant-input:focus {
    border-color: #d9d9d9;
    border-right-width: 1px !important;
    outline: 0;
    color:#fff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.content .ant-tag {
line-height: 30px;
font-size: 14px;
}
.content .ant-avatar {
    font-size: 18px;
}


@-webkit-keyframes warn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes warn {
  0% {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes warn {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.area-box .dot {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #f90;
  opacity: 1;
  filter: alpha(opacity=100);
}
.area-box .pulse {
  position: absolute;
  top: -28px;
  left: -28px;
  height: 66px;
  width: 66px;
  border: 2px solid #f90;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  -webkit-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  -moz-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  box-shadow: 0 0 4px #f90, 0 0 10px #f90 inset;
  opacity: 0.12;
  filter: alpha(opacity=0);
  -webkit-animation: warn 2s ease-out both;
  -moz-animation: warn 2s ease-out both;
  -o-animation: warn 2s ease-out both;
  animation: warn 2s ease-out both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background: 0 0;
}
.area-box .delay-1 {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
.area-box .delay-2 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.area-box .delay-3 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.area-box .delay-4 {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.area-box .delay-5 {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.area-box .delay-6 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.area-box .delay-7 {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  -o-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.area-box .delay-8 {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.area-box .delay-9 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.area-box .delay-10 {
  -webkit-animation-delay: -1.2s;
  -moz-animation-delay: -1.2s;
  -o-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.area-box .delay-11 {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#select-left-bar {
  width: 560px;
  position: absolute;
  bottom:5px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.65);
}

</style>